<template>
  <div class="newsong">
    <!-- 热门新碟 -->
    <div class="hot">
      <div class="header">
        <h3>热门新碟</h3>
      </div>
      <div class="hot_content">
        <ul>
          <li v-for="(v, i) in hotList" :key="i">
            <div class="hot_a">
              <router-link :to="`albuminfo/${v.id}`"><img :src="v.blurPicUrl" /></router-link>
            </div>
            <div class="hot_b">
              <router-link :to="`albuminfo/${v.id}`"
                ><span>{{ v.name }}</span></router-link
              >
            </div>
            <div class="hot_c">
              <span v-for="(v, i) in v.artists" :key="i"
                ><span v-if="i > 0">/</span
                ><router-link :to="`/singerinfo/${v.id}`">{{ v.name }}</router-link></span
              >
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 全部新碟 -->
    <div class="all">
      <div class="header">
        <h3>全部新碟</h3>
        <ul>
          <li><span @click="switchType($event)">全部</span></li>
          <li>丨&nbsp;&nbsp;&nbsp;<span @click="switchType($event)">华语</span></li>
          <li>丨&nbsp;&nbsp;&nbsp;<span @click="switchType($event)">欧美</span></li>
          <li>丨&nbsp;&nbsp;&nbsp;<span @click="switchType($event)">韩国</span></li>
          <li>丨&nbsp;&nbsp;&nbsp;<span @click="switchType($event)">日本</span></li>
        </ul>
      </div>
      <div class="all_content">
        <ul>
          <li v-for="(v, i) in allList" :key="i">
            <div class="all_a">
              <router-link :to="`albuminfo/${v.id}`"><img :src="v.blurPicUrl" /></router-link>
            </div>
            <div class="all_b">
              <router-link :to="`albuminfo/${v.id}`"
                ><span>{{ v.name }}</span></router-link
              >
            </div>
            <div class="all_c">
              <span v-for="(v, i) in v.artists" :key="i"
                ><span v-if="i > 0">/</span
                ><router-link :to="`/singerinfo/${v.id}`">{{ v.name }}</router-link></span
              >
            </div>
          </li>
        </ul>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="limit"
          @prev-click="prev"
          @next-click="next"
          @current-change="change"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      // 热门新碟数据
      hotList: {},
      // 全部新碟数据
      allList: {},
      // 全部新碟多少条数据
      total: 0,
      limit: 35,
      offset: 0,
      area: "ALL",
    };
  },
  //
  methods: {
    // 获取热门新碟数据
    getHotData() {
      axios.get(`http://127.0.0.1:3000/album/newest`).then((res) => {
        this.hotList = res.data.albums;
        this.hotList.pop();
        this.hotList.pop();
      });
    },
    // 获取全部新碟数据
    getAllData() {
      axios
        .get(
          `http://127.0.0.1:3000/album/new?area=${this.area}&limit=${this.limit}&offset=${this.offset}`
        )
        .then((res) => {
          this.allList = res.data.albums;
          this.total = res.data.total;
        });
    },
    // 上一页
    prev() {
      this.offset -= 35;
      this.getAllData();
      // 锚点定位
      document.querySelector(".all").scrollIntoView({
        block: "start", // 上边框与视窗顶部部平齐
      });
    },
    // 下一页
    next() {
      this.offset += 35;
      this.getAllData();
      // 锚点定位
      document.querySelector(".all").scrollIntoView({
        block: "start", // 上边框与视窗顶部部平齐
      });
    },
    change(p) {
      this.offset = (p - 1) * 35;
      this.getAllData();
      // 锚点定位
      document.querySelector(".all").scrollIntoView({
        block: "start", // 上边框与视窗顶部部平齐
      });
    },
    switchType(e){
      switch (e.target.innerText) {
        case "全部":this.area = "ALL"; break;
        case "华语":this.area = "ZH"; break;
        case "欧美":this.area = "EA"; break;
        case "韩国":this.area = "KR"; break;
        case "日本":this.area = "JP"; break;
      }
      this.getAllData();
    }
  },
  //
  created() {
    this.getHotData();
    this.getAllData();
  },
};
</script>
<style scoped>
.newsong {
  width: 980px;
  margin: 0 auto;
  background-color: #fff;
  border-left: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
  padding: 40px;
}
.header {
  display: flex;
  align-items: flex-end;
  border-bottom: 2px solid #c20c0c;
  padding-bottom: 10px;
}
.header h3 {
  font-size: 24px;
  font-weight: 400;
}
.header ul {
  margin-left: 20px;
  color: #666666;
  display: flex;
  font-size: 12px;
}
.header ul li{
  margin-left: 10px;
}
.header ul li span{
  cursor: pointer;
}
.header ul li span:hover{
  text-decoration: underline;
}
/* 新碟 */
.hot_content ul {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.hot_content ul li {
  padding-bottom: 30px;
  padding-left: 33px;
}
.hot_content ul li:nth-child(1) {
  padding-left: 0px;
}
.hot_content ul li:nth-child(5n + 1) {
  padding-left: 0px;
}
.hot_content ul li .hot_a {
  width: 153px;
  height: 130px;
  background: url("../../public/images/coverall.png") no-repeat -1px -844px;
  padding: 1px;
}
.hot_content ul li .hot_a img {
  width: 130px;
  height: 130px;
}
.hot_content ul li .hot_b {
  width: 130px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hot_content ul li .hot_b span {
  font-size: 14px;
}
.hot_content ul li .hot_b span:hover {
  text-decoration: underline;
}
.hot_content ul li .hot_c {
  width: 130px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hot_content ul li .hot_c span {
  font-size: 12px;
  color: #666666;
}
.hot_content ul li .hot_c a:hover {
  text-decoration: underline;
}
/* 全部 */
.all_content ul {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.all_content ul li {
  padding-bottom: 30px;
  padding-left: 33px;
}
.all_content ul li:nth-child(1) {
  padding-left: 0px;
}
.all_content ul li:nth-child(5n + 1) {
  padding-left: 0px;
}
.all_content ul li .all_a {
  width: 153px;
  height: 130px;
  background: url("../../public/images/coverall.png") no-repeat -1px -844px;
  padding: 1px;
}
.all_content ul li .all_a img {
  width: 130px;
  height: 130px;
}
.all_content ul li .all_b {
  width: 130px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.all_content ul li .all_b span {
  font-size: 14px;
}
.all_content ul li .all_b span:hover {
  text-decoration: underline;
}
.all_content ul li .all_c {
  width: 130px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.all_content ul li .all_c span {
  font-size: 12px;
  color: #666666;
}
.all_content ul li .all_c a:hover {
  text-decoration: underline;
}
/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>